<template>
    <div class="app-container" style="padding: 0px 20px 20px 20px;">
        <el-row :gutter="10" class="mb8" v-if="show == 0">
            <el-col :span="1.5"  v-if="opt !== 'details'">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <template v-for="list in recordsList" v-if="show == 0">
            <el-descriptions :column="3" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 8px;"
                v-if="recordsList.length != 0" size="small">
              <el-descriptions-item label="跟进时间：" style="margin-left:5px;">{{ list.followDateTime}}</el-descriptions-item>
                <el-descriptions-item label="跟进人：">{{ list.followPerson }}</el-descriptions-item>
                <el-descriptions-item label="方式：">{{ formatterType(list.type) }}</el-descriptions-item>
                <el-descriptions-item label="跟进阶段：">{{ formatterFollowStage(list.followStage) }}</el-descriptions-item>
                <el-descriptions-item label="最新进展：" style="margin-left:5px;">{{ list.latestDevelopments
                    }}</el-descriptions-item>
                <el-descriptions-item label="附件:">
                    <file-view :type="showInfo" :businessId="list.recordsId" :businessCode="businessRecords"
                        :key="refreshKey" @change="getFile"></file-view>
                </el-descriptions-item>
                <el-descriptions-item label="批注人：">{{ list.annotationsName }}</el-descriptions-item>
                <el-descriptions-item label="批注：" style="margin-left:5px;">{{ list.annotations }}</el-descriptions-item>
                <el-descriptions-item style="margin-left:5px;">
                    <el-button size="mini" type="text" icon="el-icon-edit" style="margin: 0px 0px 10px 260px;"
                        @click="handleUpdate(list)"
                        v-if='(list.annotations == null || list.annotations == "") &&  opt !== "details"'  title="编辑"></el-button>
                    <el-button size="mini" type="text" icon="el-icon-refresh-right" style="margin-left: 10px"
                        @click="convertBusiness(list)" title="转商机"></el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" style="margin-left: 10px;"
                        @click="handleDelete(list.recordsId)"
                        v-if='(list.annotations == null || list.annotations == "") && (userName == list.followPerson) && opt !== "details" ' title="删除"></el-button>
                </el-descriptions-item>
                <el-descriptions-item label="批注附件：" style="margin-left:5px;">
                    <file-view :type="showInfo" :businessId="list.recordsId" :businessCode="businessAnnotations"
                        :key="refreshKey" @change="getFile"></file-view>
                </el-descriptions-item>
            </el-descriptions>
        </template>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <div class="el-table__empty-block" style="width: 1175px; height: 100%;" v-if="recordsList.length == 0">
            <span class="el-table__empty-text" style="font-size: 16px;">暂无数据</span>
        </div>
        <!-- 添加或修改【请填写功能名称】对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="时间" prop="followTime" style="width: 280px;">
                    <el-input v-model="form.followTime" disabled="disabled" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="跟进时间" prop="followDateTime" style="width: 280px;">
                    <el-date-picker
                      v-model="form.followDateTime"
                      type="datetime"
                      placeholder="请选择跟进时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :disabled="disabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="跟进人" prop="followPerson" label-width="170px">
                    <el-input v-model="form.followPerson" disabled="disabled" />
                  </el-form-item>
                </el-col>
              </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="方式" prop="type" style="height:42px ;">
                            <el-select v-model="form.type" placeholder="请选择跟进方式" style="width: 220px;"
                                :disabled="disabled">
                                <el-option v-for="dict in dict.type.enterprise_records" :key="dict.value"
                                    :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="跟进阶段" prop="followStage" style="height:42px ;" label-width="170px">
                            <el-select v-model="form.followStage" placeholder="请选择跟进阶段" :disabled="disabled"
                                style="width: 270px;">
                                <el-option v-for="dict in dict.type.tracking_stage" :key="dict.value"
                                    :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="最新进展" prop="latestDevelopments">
                    <el-input v-model="form.latestDevelopments" type="textarea" placeholder="请输入内容" :rows="4"
                        :disabled="disabled" maxlength="500" show-word-limit />
                </el-form-item>
                <el-form-item label="附件">
                    <file-view :type="fileType" :businessId="cordId" :businessCode="businessRecords" @change="getFile"
                        :key="refreshKey"></file-view>
                </el-form-item>
                <el-form-item label="批注" prop="annotations" v-if="isShow">
                    <el-input v-model="form.annotations" type="textarea" placeholder="请输入内容" :rows="3" maxlength="500"
                        show-word-limit />
                </el-form-item>
                <el-form-item label="批注附件" v-if="isShow">
                    <file-view :type="fileType2" :businessId="cordId" :businessCode="businessAnnotations"
                        :key="refreshKey" @change="getFile"></file-view>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

    </div>
</template>

<script>
import { listRecords, getRecords, delRecords, addRecords, updateRecords } from "@/api/enterprise/records";
import FileView from "@/components/FileView/index"
export default {
    dicts: ['business_classify', 'customer_industry', 'business_state', 'tracking_stage', 'enterprise_records', 'business_source'],
    name: "Records",
    components: { FileView },
    props: {
        bId: {
            type: String,
            default: ""
        },
        enterpriseId: {
            type: String,
            default: ""
        },
        enterpriseName: {
            type: String,
            default: ""
        },
        contacts: {
            type: String,
            default: ""
        },
        telephone: {
            type: String,
            default: ""
        },
        opt:{
          type:String,
          default:''
        }
    },
    data() {
        return {
            refreshKey: 0,
            userName: "",
            fileType: 0,
            fileType2: 0,
            showInfo: 2,
            show: 0,
            disabled: false,
            isShowEdit: true,
            isShow: false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 【请填写功能名称】表格数据
            recordsList: [],
            // 弹出层标题
            title: "",
            dialogVisible: false,
            dialogImageUrl: '',
            businessRecords: "enterprise_records",
            businessAnnotations: "enterprise_annotatio",
            // 是否显示弹出层
            open: false,
            cordId: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                enterpriseId: null,
                followTime: null,
                followId: null,
                followPerson: null,
                type: null,
                latestDevelopments: null,
                annotationsId: null,
                annotationsName: null,
                annotations: null,
              followDateTime:null,
            },
            // 表单参数
            form: {
            },
            // 表单校验
            rules: {
                type: [
                    { required: true, message: "跟进方式不能为空", trigger: "change" },
                ],
                latestDevelopments: [
                    { required: true, message: "最新进展不能为空", trigger: "blur" },
                ],
                annotations: [
                    { required: true, message: "批注不能为空", trigger: "blur" },
                ],
            }
        };
    },
    created() {
        //alert(this.enterpriseId+"第二个")
        this.userName = this.$store.state.user.name;
        this.getList();
    },
    methods: {
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.recordsList = [];
            this.queryParams.enterpriseId = this.bId;
            this.queryParams.enterpriseId=this.enterpriseId;
            listRecords(this.queryParams).then(response => {
                this.recordsList = response.rows;
                this.total = response.total;
            });
        },
        closeEle(data) {
            this.type = 0;
            this.show = 1;
            console.log("执行了吗:" + data)
            this.open = data;
            this.getList();

        },
        //转商机
        convertBusiness() {
            this.uuid = this.guid();
            this.openBusinessinfoClass = true
            const enterpriseId = this.enterpriseId
            this.$router.push("/supplier/sale/businessinfo/" + enterpriseId);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.getList();
            this.reset();
        },
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
        getFile(data) {
            console.log(JSON.stringify(data))
        },
        // 表单重置
        reset() {
            this.form = {
                recordsId: null,
                enterpriseId: null,
                followTime: null,
                followId: null,
                followPerson: null,
                type: null,
                latestDevelopments: null,
                annotationsId: null,
                annotationsName: null,
                annotations: null,
              followDateTime:null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.recordsId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.uuid = this.guid();
            this.disabled = false;
            this.cordId = this.uuid;
            this.isShow = false;
            this.form.followPerson = this.$store.state.user.name;
            this.form.followTime = this.showDate();
            this.form.enterpriseId = this.enterpriseId;
            this.refreshKey++;
            this.fileType = 0;
            this.fileType2 = 0;
            this.open = true;
            this.title = "新增进展记录";
        },
        formatterType(value) {
            var type = "";
            this.dict.type.enterprise_records.forEach(item => {
                if (item.value == value)
                    type = item.label;
            });
            return type;
        },
        formatterFollowStage(value) {
            var type = "";
            this.dict.type.tracking_stage.forEach(item => {
                if (item.value == value)
                    type = item.label;
            });
            return type;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.fileType = 1;
            this.fileType2 = 1;
            this.disabled = false;
            this.isShow = false;
            this.refreshKey++;
            if (row.followPerson != this.$store.state.user.name) {
                this.isShow = true;
                this.disabled = true;
                this.fileType = 2;
            }
            const recordsId = row.recordsId || this.ids
            this.cordId = row.recordsId;
            getRecords(recordsId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改跟进记录";
            });

        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.recordsId != null) {
                        updateRecords(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.refreshKey++;
                            this.$emit('change');
                            this.getList();
                        });
                    } else {
                        this.form.recordsId = this.uuid;
                        addRecords(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;

                            this.refreshKey++;
                            this.$emit('change');
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const recordsIds = row;
            this.$modal.confirm('是否确认删除该条跟进记录信息？').then(function () {
                return delRecords(recordsIds);
            }).then(() => {
                this.$modal.msgSuccess("删除成功");
                this.$emit('change');
                this.getList();
            }).catch(() => { });
        },
        showDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
            str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
            return str;
        },
        formatterDate(date) {
            var mydate = new Date(date);
            var str = "" + mydate.getFullYear() + "-";
            str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
            str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
            return str;
        },
        guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        },
    }
};
</script>
<style scoped>
.el-descriptions-item__label {
    margin-left: 5px;
    margin-top: 4px
}

.el-descriptions-item__content span {
    margin-top: 4px
}

.el-descriptions__header {
    padding: 0px;
}

.el-descriptions-item__label.has-colon::after {
    content: "";
}
</style>
